<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>客 户 管 理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"
          th:href="@{/resource/layui/css/layui.css}"
          media="all">
    <script type="text/javascript"
            th:src="@{/resource/js/jquery-3.6.0.min.js}"></script>

</head>
<body>
<div class="layui-form">
    <div class="layui-input-inline">
        <select name="searchType" lay-filter="searchType" id="searchType">
            <option value="customerId">客户编号</option>
            <option value="customerName">客户名称</option>
        </select>
    </div>

    <div class="layui-inline">
        <input class="layui-input" name="searchValue" id="searchReload" autocomplete="off">
    </div>

    <button class="layui-btn" data-type="reload" id="searchButton">搜索</button>
</div>

<table class="layui-hide" id="customerListTable" lay-filter="wholeTable"></table>


<script type="text/html" id="firstTool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-green layui-btn-sm" lay-event="add">新增<i
                class="layui-icon layui-icon-add-1"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="edit">编辑<i
                class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="delete">批量删除<i
                class="layui-icon layui-icon-delete"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-black layui-btn-sm" lay-event="refresh">刷新<i
                class="layui-icon layui-icon-refresh-3"></i></button>
    </div>
</script>

<script th:src="@{/resource/layui/layui.js}"
        charset="utf-8"></script>

<script>
    layui.use(['table', 'util', 'layer'], function () {
        var table = layui.table;
        var util = layui.util;
        var layer = layui.layer;

        table.render({
            elem: '#customerListTable',
            url: 'lists',
            toolbar: '#firstTool' //开启头部工具栏，并为其绑定左侧模板
            ,
            id: 'tableReload',
            defaultToolbar: ['filter', 'exports', 'print'],
            title: '订单列表',
            cols: [
                [{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'customerId',
                title: '客户编号',
                unresize: true,
                sort: true
            }, {
                field: 'customerName',
                title: '客户名称'
            }, {
                field: 'customerFullName',
                title: '客户全称',
            }, {
                field: 'address',
                title: '地址',
            }, {
                field: 'fax',
                title: '传真',
                sort: true
            }, {
                field: 'email',
                title: '邮箱'
            }, {
                field: 'managerName',
                title: '经理姓名',
            }, {
                field: 'telephone',
                title: '联系电话',
            }, {
                field: 'status',
                title: '客户状态 ',
                templet: '#status',
                sort: true
            }, {
                field: 'demo',
                title: '备注'
            }]
            ],
            page: true
        });

        //重新加载
        var $ = layui.$, active = {
            reload: function () {
                var searchReload = $('#searchReload');
                var searchType = $('#searchType');
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        searchType: searchType.val(),
                        searchValue: searchReload.val()
                    }
                });
            }
        };

        $('#searchButton').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头工具栏事件
        table.on('toolbar(wholeTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        content: 'add',
                        skin: 'layui-layer-molv',
                        area: ['600px', '600px']
                    });
                    break;
                case 'edit':
                    if (data.length > 1) {
                        layer.msg('只能选择一个数据进行修改', {
                            icon: 2,
                            time: 2000
                        });
                        return false;
                    } else if (data.length == 0) {
                        layer.msg('请选择一个数据进行修改', {
                            icon: 2,
                            time: 2000
                        });
                        return false;
                    }
                    var customerId = data[0].customerId;
                    layer.open({
                        type: 2,
                        content: 'update?customerId=' + customerId,
                        skin: 'layui-layer-molv',
                        area: ['600px', '600px'],
                    });
                    break;
                case 'delete':
                    if (data.length == 0) {
                        layer.msg('请选择数据进行删除', {
                            icon: 2,
                            time: 2000
                        });
                        return false;
                    }
                    var customerIds = [];
                    for (var i = 0; i < data.length; i++) {
                        customerIds.push(data[i].customerId);
                    }
                    $.post("deleteAll?customerIds=" + customerIds, function (obj) {
                        if (obj.result == 1) {
                            layer.msg(obj.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                location.reload();
                            });
                            return false;
                        } else {
                            layer.msg(obj.msg, {
                                icon: 2,
                                time: 2000
                            });
                            return false;
                        }
                    });
                    return false;
                    break;

                case 'refresh':
                    location.reload();
                    break;
            }
            ;
        });

    });
</script>

<script type="text/html" id="status">
    {{#  if(d.status == "有效客户"){ }}
    <span style="color: #00BFFF;">有效客户</span>
    {{#  } else { }}
    <span style="color: #F581B1;">无效客户</span>
    {{#  } }}
</script>

</body>
</html>